<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>传悦首页</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        li {
            list-style: none;
        }
        
        a {
            text-decoration: none;
        }
        
        img {
            vertical-align: middle;
        }
        
        html,
        body {
            height: 100%;
        }
        
        body {
            background: url(img/bj.jpg) no-repeat;
            background-size: 100% 100%;
            display: flex;
            flex-direction: column;
        }
        /* #big {
            width: 100%;
            height: 100%;
            background: url(img/bj.png) no-repeat;
            background-size: 100% 100%;
        } */
        
        header {
            width: 100%;
            background-color: #323232;
            z-index: 2;
        }
        
        header #header-con {
            width: 1100px;
            height: 36px;
            margin: auto;
        }
        
        .logo {
            width: 183px;
            height: 333px;
        }
        
        .logo ul {
            background-color: #0a0c0e;
            height: 218px;
        }
        
        .logo ul li {
            height: 43px;
            display: flex;
            justify-content: flex-end;
            line-height: 43px;
            box-sizing: border-box;
            padding-right: 22px;
        }
        
        .logo ul li a {
            font-size: 14px;
            color: #5f5f60;
        }
        
        .logo ul li a:hover {
            color: #dd4012;
        }
        
        #contact {
            float: right;
            display: flex;
        }
        
        #contact img {
            width: 18px;
            height: 18px;
            /* display: block; */
            margin-right: 17px;
            margin-top: 8px;
            cursor: pointer;
        }
        
        #contact p {
            line-height: 36px;
            font-size: 10px;
            color: #505050;
            margin-right: 24px;
        }
        
        section {
            width: 1100px;
            /* height: 783px; */
            flex: 1;
            position: relative;
            margin: auto;
            /* z-index: 1; */
        }
        
        #viewpoint {
            width: 316px;
            height: 136px;
            background-color: #dd4012;
            /* float: right; */
            /* margin-top: 76px; */
            box-sizing: border-box;
            padding: 14px 15px 20px;
            position: absolute;
            top: 76px;
            right: 0;
        }
        
        #del {
            position: absolute;
            top: -13px;
            right: -8px;
        }
        
        #viewpoint h2 {
            font-size: 17px;
            color: #ffd1c4;
            background: url(img/right.png) no-repeat right;
        }
        
        #viewpoint h2 span {
            font-size: 9px;
            color: #fe734b;
        }
        
        #viewpoint h3 {
            font-size: 14px;
            color: #ffd1c4;
            font-weight: normal;
        }
        
        #viewpoint h6 {
            font-size: 8px;
            color: #f77751;
            font-weight: normal;
            margin-bottom: 6px;
            margin-top: 6px;
        }
        
        #viewpoint h4 {
            font-size: 12px;
            color: #ffa88f;
            font-weight: normal;
        }
        
        #viewpoint .pic-word {
            display: flex;
            margin-top: 20px;
        }
        
        #viewpoint .pic-word .word {
            margin-left: 10px;
        }
        
        footer {
            width: 100%;
            height: 48px;
            background: url(img/footer.png) no-repeat;
            background-size: 100% 100%;
            box-sizing: border-box;
            border-top: 1px solid #505050;
        }
        
        footer #footer-con {
            width: 1100px;
            margin: auto;
            line-height: 48px;
            font-size: 12px;
            color: #666666;
            display: flex;
            justify-content: space-between;
        }
        
        footer ul {
            display: flex;
        }
        
        footer ul li {
            margin-left: 13px;
            cursor: pointer;
        }
        
        #template {
            display: none;
        }
    </style>
</head>

<body>
    <header>
        <div id="header-con">
            <div id="contact">
                <img src="img/phone.png" alt="">
                <p>0535-60652189</p>
                <img src="img/QQ.png" alt="">
                <img src="img/weibo.png" alt="">
                <img src="img/weixin.png" alt="">
                <img src="img/Email.png" alt="">
            </div>
            <div class="logo">
                <img src="img/logo.png" alt="">
                <ul>
                    <li>
                        <a href="#">HOME&nbsp;&nbsp;网站首页</a>
                    </li>
                    <li>
                        <a href="#">RESOURSE&nbsp;&nbsp;传悦资源</a>
                    </li>
                    <li>
                        <a href="/case">CASES&nbsp;&nbsp;传悦案例</a>
                    </li>
                    <li>
                        <a href="/project">SOLUTION&nbsp;&nbsp;解决方案</a>
                    </li>
                    <li>
                        <a href="#">SUBMIT&nbsp;&nbsp;需求提交</a>
                    </li>
                </ul>
            </div>

        </div>
    </header>
    <section>

        <div id="viewpoint">
            <h2>传悦观点<span>VIEWPOINT</span></h2>
            <div class="pic-word">
                <img src="img/pic-1.png" alt="">
                <div class="word">
                    <h3>传悦上线前的准备工作</h3>
                    <h6>08-17</h6>
                    <h4>创梦网络科技有限责任公司......</h4>

                </div>
            </div>
            <div id="del">
                <img src="img/x.png" alt="">
            </div>
        </div>

    </section>

    <footer>
        <div id="footer-con">
            <p>Copyright&nbsp;&copy;2013&nbsp;&nbsp;创梦网络科技有限责任公司&nbsp;&nbsp;&nbsp;||&nbsp;&nbsp;&nbsp;传悦&nbsp;&nbsp;Chnyoo.cn&nbsp;All&nbsp;Rights&nbsp;Reserved&nbsp;&nbsp;京ICP备12005221号</p>
            <ul>
                <li>关于传悦</li>
                <li>新闻动态</li>
                <li>传悦观点</li>
                <li>联系传悦</li>
                <li>加入传悦</li>
                <li>付款账户</li>
            </ul>
        </div>
    </footer>

</body>

</html>

<script>
    let del = document.querySelector("#del");
    let viewpoint = document.querySelector("#viewpoint");

    del.onclick = function() {
            viewpoint.style.display = "none";
        }
        //模板
    let template = document.querySelector("#template");
    //ul
    let ul = document.querySelector(".logo ul")


    //所有li内容
    // let http = new XMLHttpRequest();
    // http.open("get", "http://10.35.164.244:8080/index");
    // http.send();
    // http.onreadystatechange = function() {
    //     if (http.readyState === 4) {
    // let o = JSON.parse(http.responseText);
    // console.log(o);

    //         o.forEach(function(item) {
    //             let newLi = template.cloneNode(true);
    //             newLi.id = "";
    //             ul.appendChild(newLi);
    //             newLi.querySelector("a").innerHTML = item.word;
    //             if (newLi.querySelector("a").innerHTML.indexOf("案例") !== -1) {
    //                 newLi.querySelector("a").setAttribute("href", "case.html");
    //             }

    //             if (newLi.querySelector("a").innerHTML.indexOf("方案") !== -1) {
    //                 newLi.querySelector("a").setAttribute("href", "project.html");
    //             }
    //         })
    //     }
    // }
</script>